<template>
  <header 
  class="header-container flex flex-between" 
  :class="[['Home'].includes(routeName)&&'white',fixed&&'fixed', ['WorkList'].includes(routeName)&&fixed&&'black']">
    <div class="flex f16">
    <router-link :to="{ name: 'Home' }">首页</router-link>
    <nav>
      <ul class="flex">
        <li v-for="(item,index) in navs" :key="index" class="ml10">
          <router-link :to="{ name: item.to }">{{item.label}}</router-link>
        </li>
      </ul>
    </nav>
    </div>
    <div class="f16 list" v-if="!fixed&&['Work'].includes(routeName)" @click="to">
      <router-link :to="{ name: 'WorkList' }">列表</router-link>
    </div>
    <div class="f16 list" v-if="['WorkList'].includes(routeName)&&!fixed" @click="to">
      <router-link :to="{ name: 'Work' }">关闭</router-link>
    </div>
  </header>
</template>

<script>
import { ref, watch, inject } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name:'FNav',
  props: {
    fixed: {
      type: Boolean,
      default: false,
    }
  },
  setup(props, ctx) {
    const route = useRoute();
    const router = useRouter();
    const routeName = ref('');
    routeName.value = route.name
    
    const setNavFixed = inject('setNavFixed')

    const navs = [
      {
        label: "案例",
        to: "Work",
      },
      {
        label: "关于",
        to: "About",
      },
      {
        label: "联系我的",
        to: "Contact",
      },
    ];
    watch(
      () => route.name,
      (_new) => {
        routeName.value = _new
        props.fixed&&setNavFixed(false)
      },
      {
        immediate: true,
      }
    );


    function onChange(active) {
     
    }

    return {
      routeName,
      navs,
    };
  },
};
</script>
<style lang="less" scoped>
.header-container{
  transition: padding .4s ease;
  will-change: padding;
  position: relative;
  z-index: 100;
  // background-color: #fff;
  .padding-top(30px);
  .padding-left(36px);
  .padding-right(36px);
  @media @max768{
    .padding-top(20px);
    .padding-left(26px);
    .padding-right(26px);
  }
  &.fixed{
    position: fixed;
    top: 0;
    left: 0;
  }
  a{
    transition: .2s color;
    color: inherit;
    &:hover{
      font-style: italic;
    }
  }
  &.white{
    // background-color: #000;
  }
  ::v-deep(.router-link-active){
    font-style: italic;
    &:hover{
      font-style: initial;
    }
  }
}
.list{
  cursor: pointer;
  &:hover{
    font-style: italic;
  }
}

</style>